<template>
<div :style="{marginLeft: ((data.depth - 1) * 5) + '%'}" class="task">
  <div class="input-group">
    <div class="input-group-btn">
      <button :title="data.finished === '0' ? 'Finish Task' : 'Unfinish Task'" @click="this.toggleFinished()" class="btn btn-default">
        <span v-if="data.finished !== '0'" class="glyphicon glyphicon-check"></span>
        <span v-if="data.finished === '0'" class="glyphicon glyphicon-unchecked"></span>
      </button>
    </div>
    <span :style="{backgroundColor: data.tagColor}" class="task-float"></span>
    <div class="form-control task-title"><b>{{data.name}}</b></div>
    <div class="input-group-btn">
      <button :title="detailed ? 'Hide Detail' : 'Show Detail'" class="btn btn-default" @click="this.toggleDetail()">
        <span class="glyphicon glyphicon-menu-down" v-show="!detailed"></span>
        <span class="glyphicon glyphicon-menu-up" v-show="detailed"></span>
      </button>
      <button title="Add Sub Task" class="btn btn-default" @click="$parent.addTask(this.data.hash)"><span class="glyphicon glyphicon-plus"></span></button>
    </div>
  </div>
  <div style="word-wrap: break-word; border: solid #ccc 1px; position: relative;" v-show="detailed" class="task-detail">
    <b>{{data.name}}</b>
    <div style="float: right; cursor: pointer;">
      <span class="glyphicon glyphicon-refresh" title="Refresh comments" @click="this.fetchComments()"></span>
      <span style="pointer: normal;">&nbsp;</span>
      <span class="glyphicon glyphicon-pencil" title="Edit this Task"  @click="$parent.editTask(this)"></span>
    </div>
    <br />
    {{data.detail}}
    <br />
    <small style="margin-left: 50%; color: #999;">{{data.createdTime}} - {{data.createdBy}}</small>
    <hr />
    <div v-for="com in comments">
      <!--Comments Here-->
      {{{com.content}}}
      <br />
      <small style="margin-left: 50%; color: #999;">{{com.postTime}} - {{com.author}}</small>
      <hr />
    </div>
    <div>
      <small>Post your comment:</small>
      <textarea type="text" class="form-control" v-model="comment"></textarea>
      <button class="btn btn-default btn-sm" style="width: 100%;" @click="this.postComment()">Submit</button>
    </div>
  </div>
</div>
</template>

<script>
/* global alert */
import config from '../config'
export default {
  props: ['data', 'index'],
  data () {
    return {
      detailed: false,
      first: true,
      comment: '',
      comments: []
    }
  },
  methods: {
    toggleDetail () {
      this.$set('detailed', !this.detailed)
      if (this.first) {
        // Get comments
        this.fetchComments()
      }
      this.$set('first', false)
    },
    postComment () {
      if (this.comment === '') {
        alert('Comment content cannot be null!')
        return
      }
      // TODO: Add comment
      this.$http.post(config.apiPath + '/comment/' + this.data.hash, {
        author: this.$root.user.name,
        taskId: this.data.id,
        projectHash: this.$route.params.projectHash,
        content: this.comment
      }, {
        credentials: true,
        emulateJSON: true
      }).then((response) => {
        // Append comment
        this.comments.$set(this.comments.length, response.data)
        // this.$set('comments[' + this.comments.length + ']', response.data)
        this.$set('comment', '')
        console.log(response)
      }, (response) => {
        console.log(response)
        alert('error when posting comment: ' + response.status + '\n' + response.data)
      })
    },
    toggleFinished () {
      if (this.data.finished === '0') {
        this.$set('data.finished', '1')
      } else {
        this.$set('data.finished', '0')
      }
      // TODO: Do HTTP request
      return
    },
    fetchComments () {
      this.$http.get(config.apiPath + '/comment/' + this.data.hash, {credentials: true}).then((response) => {
        console.log(response)
        this.$set('comments', response.data)
      }, (response) => {
        console.log(response)
        alert('error when fetching comments: ' + response.status + '\n' + response.data)
      })
    }
  }
}
</script>

<style>
.task-title {
  font-family: Microsoft YaHei;
  overflow: hidden;
}

.task-detail {
  font-family: Microsoft YaHei;
  padding: 15px 5%;
}

.task-float {
  position: absolute;
  top: 5px;
  right: 85px;
  width: 10px;
  height: 10px;
  z-index: 10;
}
</style>
